<template>
 <div>
    <div  class="positionR">
        <div class="manageBox">
            <div v-if="type == 'views'" class="flexSB colorFFF hand" style="width: 60px; padding: 8px" @click="manageFun">
                <img src="@/assets/manage/manage.png" alt srcset width="20px" />
                <span>管理</span>
            </div>
            <div v-else class="flexSB" style="width: 280px;">
                <div class="flexFS colorFFF hand" style="width: 60px; padding: 8px">
                    <el-checkbox v-model="allSelect" @change="allSelectFun"></el-checkbox>
                    <div style="margin-left: 5px;" class="hand" @click="allSelectFun(!allSelect)">全选</div>
                </div>
                <div class="flexFS colorFFF hand" style="width: 60px; padding: 8px" @click="centerDialogVisible = true">
                    <img src="@/assets/manage/delete.png" alt srcset width="20px" />
                    <span style="margin-left: 5px;">删除</span>
                </div>
                <div @click="outManageFun" class="flexFS colorFFF hand" style="width: 90px; padding: 8px">
                    <img src="@/assets/manage/out-manage.png" alt srcset width="20px" />
                    <span style="margin-left: 5px;">退出管理</span>
                </div>
            </div>
        </div>
        <el-tabs @tab-click="handleClick" class="mt-20" v-model="activeName">
            <el-tab-pane label="下单记录" name="0">
                <down ref="way0"></down>
            </el-tab-pane>
            <el-tab-pane label="接单记录" name="1">
                <take ref="way1"></take>
            </el-tab-pane>
        </el-tabs>
    </div>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%">
            <span>确定要删除选中的内容吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteFun()">确 定</el-button>
            </span>
        </el-dialog>
 </div>
</template>

<script>
import down from './down.vue'
import take from './take.vue'
export default {
    components: {
        down,
        take,
    },
    data() {
        return {
            activeName: 0,
            type: 'views',
            allSelect: false,
            centerDialogVisible: false,
        }
    },
    methods: {
        handleClick() {
            this.type = "views"
        },
        manageFun() {
            this.type = 'edit'
            switch (this.activeName) {
                case '0':
                    console.log('下单记录')
                    this.$refs.way0.type = 'edit'
                    break;
                case '1':
                    console.log('接单记录')
                    this.$refs.way1.type = 'edit'
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },
        deleteFun() {
            this.centerDialogVisible = false
            switch (this.activeName) {
                case '0':
                    console.log('下单记录')
                    this.$refs.way0.deleteOrder()
                    break;
                case '1':
                    console.log('接单记录')
                    this.$refs.way1.deleteOrder()
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },

        outManageFun() {
            this.type = 'views'
            switch (this.activeName) {
                case '0':
                    console.log('下单记录')
                     this.$refs.way0.type = 'views'
                    break;
                case '1':
                    console.log('接单记录')
                    this.$refs.way1.type = 'views'
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },
        allSelectFun(e) {
            console.log('jr,e=', e)
            this.allSelect = e
            switch (this.activeName) {
                case '0':
                    console.log('下单记录')
                    if (this.allSelect) {
                        this.$refs.way0.allSelect()
                    } else {
                        this.$refs.way0.cancelAllSelect()
                    }

                    break;
                case '1':
                    console.log('接单记录')
                    if (this.allSelect) {
                        this.$refs.way1.allSelect()
                    } else {
                        this.$refs.way1.cancelAllSelect()
                    }
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.manageBox {
    position: absolute;
    z-index: 999;
    right: 0;
    top: 0;
}
</style>